<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="multipart/form-data;         charset=utf-8" />
<link th:href="@{/css/plugins/dropzone/basic.css}" rel="stylesheet">
<link th:href="@{/css/plugins/dropzone/dropzone.css}" rel="stylesheet">

<head th:include="include :: header"></head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m" id="form-filemanager-add" enctype="multipart/form-data" th:action="@{add}" method="post">
		<div class="form-group">
			<label class="col-sm-3 control-label">节目名称：</label>
			<div class="col-sm-8">
				<input id="filename1" name="filename1" class="form-control" type="text">
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label">文件上传：</label>
			<div class="col-sm-8">
				<input id="files" name="files" class="form-control" type="file" accept="audio/mpeg">
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label">文件时长：</label>
			<div class="col-sm-8">
				<input id="flenth" name="flenth" class="form-control" type="text" hidden readonly value="">
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label">文件大小：</label>
			<div class="col-sm-8">
				<input id="fsize" name="fsize" class="form-control" type="text" hidden readonly value="">
			</div>
		</div>
		<!--<input type="submit" value="提交">-->
	</form>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript">
    var prefix = ctx + "broad/per";
    // 检测是否选择文件，如果选择，返回文件对象;如果没选择，返回false
    function checkFile(){
        // 获取文件对象(该对象的类型是[object FileList]，其下有个length属性)
        var fileList = $('#files')[0].files;

        // 如果文件对象的length属性为0，就是没文件
        if (fileList.length === 0) {
            console.log('没选择文件');
            return false;
        };
        return fileList[0];
    };

    function aa(){
        let  file = checkFile();
        let size = file.size;
        console.log("文件大小",size);
        //获取录音时长
        let url = URL.createObjectURL(file);
        //经测试，发现audio也可获取视频的时长
        let audioElement = new Audio(url);
        //let duration;
       let duration = audioElement.duration/60; //音频长度 视频不行
       //  audioElement.addEventListener("loadedmetadata", function () { //视频，音频都行
       //      duration = audioElement.duration/60;
       //  });
        $("#flenth").attr("value",duration);
        $("#fsize").attr("value",size);
		console.log(duration,size)
    };
    function submitHandler() {
        aa();
        $.modal.loading("正在处理中，请稍后...");
        if (!checkFile()) {
            alert('请先选择文件');
            return false;
        }
        else{
//            $("#form-filemanager-add").submit();
            $(function(){
                /** 验证文件是否导入成功  */
                $("#form-filemanager-add").ajaxSubmit(function (data) {
                    $.operate.successCallback({"code":data.code,"msg":data.msg});
                    //alert("post success." + data.code+"--"+data.msg);
                });
                return false;
            });

            //$.operate.successCallback({"code":0,"msg":"上传成功"});
            // console.log(filenames,file)
            // var config = {
            //     url: prefix + "/add",
            //     type: "post",
            //     dataType: "json",
            //     async:true, //是否使用异步请求的方式
            //     timeout:5000, //请求超时的时间，以毫秒计
            //     cache: false,			//上传文件无需缓存
            //     processData: false,		//用于对data参数进行序列化处理 这里必须false
            //     data:{
            //         filename:filenames,
            // 		files:file
            // 	} ,//JSON.stringify({"files":file})
            //     success: function(result) {
            //         $.operate.successCallback(result);
            //     }
            // };
            //$.ajax(config)
        }
    }
    function sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    }
</script>
<script>
    $(document).ready(function(){Dropzone.options.myAwesomeDropzone={autoProcessQueue:false,uploadMultiple:true,parallelUploads:100,maxFiles:100,init:function(){var myDropzone=this;this.element.querySelector("button[type=submit]").addEventListener("click",function(e){e.preventDefault();e.stopPropagation();myDropzone.processQueue()});this.on("sendingmultiple",function(){});this.on("successmultiple",function(files,response){});this.on("errormultiple",function(files,response){})}}});
</script>
<script th:src="@{/js/plugins/dropzone/dropzone.js}"></script>
<script th:src="@{/js/jquery-form.js}"></script>
</body>

</html>
